<template>
  <div>
    <PageWrapper :dense="true" :contentFullHeight="true">
      <template #headerContent>
        <Row>
          <Col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8" style="margin-top: 10px">
            <Dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>
                测试数据
                <Icon icon="mingcute:down-fill" />
              </a>
              <template #overlay>
                <Menu>
                  <MenuItem key="1">
                    <UserOutlined />
                    测试数据1
                  </MenuItem>
                  <MenuItem key="2">
                    <UserOutlined />
                    测试数据2
                  </MenuItem>
                  <MenuItem key="3">
                    <UserOutlined />
                    测试数据3
                  </MenuItem>
                </Menu>
              </template>
            </Dropdown>
          </Col>
          <Col :span="16" :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <Tabs v-model:activeKey="activeKey" @change="changeaAtiveKey(activeKey)">
              <TabPane v-for="item in overviewList" :key="item.id" :tab="item.name" />
            </Tabs>
          </Col>
        </Row>
      </template>
      <template #default>
        <ProjectOverview v-if="activeKey === '1'" />
        <TaskManager v-if="activeKey === '2'" :projectId="projectId" />
        <Gantt v-if="activeKey === '3'" />
      </template>
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '/@/components/Page';
  import { Row, Col, Dropdown, Menu, MenuItem, Tabs, TabPane } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { ref, reactive } from 'vue';
  import ProjectOverview from './projectOverview.vue';
  import TaskManager from './taskManager.vue';
  import { useRoute } from 'vue-router';
  import Gantt from './gantt.vue';

  const route = useRoute();
  const projectId = route.params?.id as string;
  const activeKey = ref('1');
  const overviewList = reactive([
    { id: '1', name: '项目概览' },
    { id: '2', name: '任务管理' },
    { id: '3', name: '甘特图' },
    { id: '4', name: '项目文件' },
  ]);
  // 切换面板
  const changeaAtiveKey = (activeKey) => {
    console.log(activeKey);
  };
</script>
